<!-- 文件上传实现 -->
<%@ page language="java" pageEncoding="utf-8"%>

<input type="text" size="20" name="upfile" id="upfile"   style="border: 1px dotted rgb(30, 139, 180);width: 50%;height: 25px;">
<input type="button" class="button" value="选择图片" onclick="sampleFile.click()"   style="margin-bottom: 7px;" >
<input type="file" id="sampleFile" name="sampleFile"  accept="image/gif, image/jpeg" style="display: none"  onchange="upfile.value=this.value;fileSelected();">

<span id="data-file-hidden"  data-file-hidden=""></span>

<br >
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div id="progressNumber"></div>
<br>
<div id="previewPic"><strong>图片预览：</strong><br></div>
	<!-- 图片文件的预览 -->
	
<script type="text/javascript">
	function fileSelected() {
		var file = document.getElementById('sampleFile').files[0];
		if (file) {
			var fileName = file.name;
			var postFix = fileName.match(/(\S*)\.(\S*)$/)[2];
				
		    if( postFix =='bmp' || postFix =='jpeg' || postFix =='gif' || postFix =='jpg' || postFix =='png'){  //如果是图片的话
				var fileSize = 0;
				if (file.size > 1024 * 1024)
					fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
				else
					fileSize = (Math.round(file.size * 100 / 1024) / 100).toString()+ 'KB';
				    document.getElementById('fileName').innerHTML = '<br><Strong>图片信息：</Strong><br><Strong>   Name:   </Strong>'+ file.name;
				    document.getElementById('fileSize').innerHTML = '<Strong>   Size:   </Strong> '+ fileSize;
				    document.getElementById('fileType').innerHTML = '<Strong>   Type:   </Strong>'+ file.type; //fileType必须没有才行 
				    performAjaxSubmit();
			} else { //如果不符合要求的情况
				if (window.ActiveXObject) {//for IE
					file.select(); //select the file ,and clear selection
					document.selection.clear();
				} else if (window.opera) { //for opera
					file.type = "text";
					file.type = "file";
				} else
					file.value = ""; //for FF,Chrome,Safari
				alert("您选择的文件非图片格式，请重新选择文件。。。。。。");
			}
		}
	}

	function uploadProgress(evt) {
		if (evt.lengthComputable) {
			var percentComplete = Math.round(evt.loaded * 100 / evt.total);
			document.getElementById('progressNumber').innerHTML = '<Strong>Percentage:</Strong>'+ percentComplete.toString() + '%';
		} else {
			document.getElementById('progressNumber').innerHTML = 'unable to compute';
		}
	}

	function performAjaxSubmit() {

		var sampleFile = document.getElementById("sampleFile").files[0];
		var formdata = new FormData();
		formdata.append("sampleFile", sampleFile);
		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		//	 xhr.addEventListener("load", uploadComplete, false);
		//  xhr.addEventListener("error", uploadFailed, false);
		//  xhr.addEventListener("abort", uploadCanceled, false);
		xhr.open("POST", "${ctx}/user/file.action?method:uploadFile=xx", true);
		xhr.send(formdata);
		xhr.onload = function(e) {
			if (this.status == 200) {
				eval("var json=" + this.responseText);
				 //将图片显示出来
				 $("#previewPic").append("<img style='max-width:690px;' src='${ctx}/user/file.action?method:previewPic&fileId=" + json.fileId + "' ><img>");
				
				 var single = "{'fileId':"+json.fileId+"}";
		    	 var source = $("#data-file-hidden").attr("data-file-hidden");   //为了应付上传多幅图片
		    	 $("#data-file-hidden").attr("data-file-hidden",source + single +",");  
				
			}
		};
	}
</script>



